<script lang="ts" setup>
import { Delete, Edit, Setting, TopRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import ConferenceForm from './ConferenceForm.vue'
import Conference from '@/api/modules/conference'
import CustomListItem from '@/components/CustomListItem/index.vue'

const router = useRouter()
function useList() {
  const tableData = ref<ConferenceApiTypes.list[]>([])
  const paginator = reactive({
    total: 0,
    page: 1,
    pageSize: 5,
  })
  function loadList() {
    Conference.getList({
      page: paginator.page,
      pageSize: paginator.pageSize,
    }).then((res) => {
      tableData.value = res.data.list
      paginator.total = res.data.total
    })
  }

  onBeforeMount(() => {
    loadList()
  })
  return {
    tableData,
    loadList,
    paginator,
  }
}

const { tableData, loadList, paginator } = useList()
const formModel = reactive({
  id: -1,
  name: '',
  dataTimeRange: [new Date(), new Date()] as [Date, Date],
  position: '',
})
const dialogVisible = ref(false)
const isDialogEdit = ref(false)

// 打开新增模态框
function add() {
  isDialogEdit.value = false
  dialogVisible.value = true
}

// 跳转编辑页面
function edit(row: ISubConference) {
  router.push({
    name: 'ConferenceEdit',
    params: {
      pid: row.id,
    },
  })
}

// 跳转会议控制页面
function control(row: ISubConference) {
  router.push({
    name: 'ConferenceControl',
    params: {
      pid: row.id,
    },
  })
}

function onConfirm() {
  Conference.create({
    name: formModel.name,
    position: formModel.position,
    startTime: dayjs(formModel.dataTimeRange[0]).format('YYYY-MM-DD HH:mm:ss'),
    endTime: dayjs(formModel.dataTimeRange[1]).format('YYYY-MM-DD HH:mm:ss'),
  }).then(() => {
    ElMessage({
      type: 'success',
      message: '新增成功',
    })
    loadList()
  })

  dialogVisible.value = false
}

function onDialogClose() {
  formModel.id = -1
  formModel.name = ''
  formModel.position = ''
}

function showScreen(id: number) {
  window.open(`${window.location.origin}/#/screen-display/${id}`)
}

function onFormChange<T extends 'name' | 'position' | 'dataTimeRange'>(name: T, value: (typeof formModel)[T]) {
  formModel[name] = value
}

// 状态标签
function parseStatusContent(status: number) {
  if (status === 0) {
    return '未开始'
  }
  else if (status === 1) {
    return '进行中'
  }
  else {
    return '已结束'
  }
}

function parseStatusType(status: number) {
  if (status === 0) {
    return ''
  }
  else if (status === 1) {
    return 'success'
  }
  else {
    return 'info'
  }
}
const tableColumnsBasic = [
  {
    name: '标题',
    key: 'name',
    show: true,
    width: 230,
  },
  {
    name: '会议地点',
    key: 'position',
    show: true,
    width: 110,
  },
  {
    name: '预计开始时间',
    key: 'startTime',
    show: true,
    width: 180,
  },
  {
    name: '预计结束时间',
    key: 'endTime',
    show: true,
    width: 180,
  },
  {
    name: '会议状态',
    key: 'status',
    show: true,
    width: 100,
  },
]

const tableColumns = ref(cloneDeep(tableColumnsBasic))

function handleColumnsChange(columns: string[]) {
  tableColumns.value.forEach((item) => {
    if (columns.includes(item.name)) {
      item.show = true
    }
    else {
      item.show = false
    }
  })
}

const customListItemRef = ref()
function openColumnsDialog() {
  customListItemRef.value.show()
}
</script>

<template>
  <div>
    <div class="sub-conference">
      <page-header title="会议管理" content="PageHeader">
        <el-button type="primary" @click="openColumnsDialog">
          <el-icon>
            <Setting />
          </el-icon>
        </el-button>
      </page-header>
      <PageMain>
        <el-table :data="tableData" style="width: 100%;" max-height="400">
          <el-table-column type="index" width="50" />
          <template v-for="item in tableColumns" :key="item.key">
            <el-table-column v-if="item.show === true" :prop="item.key" :label="item.name" :width="item.width">
              <template v-if="item.key === 'status'" #default="status">
                <el-tag :type="parseStatusType(status.row.status)" :disable-transitions="true">
                  {{ parseStatusContent(status.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
          </template>

          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-space wrap>
                <el-button
                  type="success" :icon="Edit" :disabled="scope.row.status > 0"
                  @click.prevent="edit(scope.row)"
                >
                  编辑
                </el-button>

                <el-button type="success" :icon="Edit" @click.prevent="control(scope.row)">
                  会议控制
                </el-button>

                <el-popconfirm
                  confirm-button-text="确认" cancel-button-text="取消" confirm-button-type="danger"
                  icon-color="#F56C6C" title="是否删除此会议"
                  @confirm="Conference.delete(scope.row.id).then(() => loadList())"
                >
                  <template #reference>
                    <el-button type="danger" :icon="Delete" @click.prevent="">
                      删除
                    </el-button>
                  </template>
                </el-popconfirm>
                <el-button type="warning" :icon="TopRight" @click.prevent="showScreen(scope.row.id)">
                  屏幕投放
                </el-button>
              </el-space>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" style="width: 100%; margin-top: 30px;" plain @click="add">
          新增一项
        </el-button>
      </PageMain>
      <FixedActionBar>
        <el-pagination
          v-model:current-page="paginator.page" v-model:page-size="paginator.pageSize" background
          layout="prev, pager, next" :total="paginator.total" :page-sizes="[5, 10, 20, 50]" @current-change="loadList"
          @size-change="loadList"
        />
      </FixedActionBar>

      <el-dialog v-model="dialogVisible" :title="isDialogEdit ? '编辑' : '新增'" width="60%" center @closed="onDialogClose">
        <ConferenceForm :value="formModel" @change="onFormChange" />
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="onConfirm">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <CustomListItem ref="customListItemRef" :columns="tableColumns" @column-change="handleColumnsChange" />
  </div>
</template>
